<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<script type="text/javascript">
var flag = true;
var gFlag = true;
var pFlag = true;
	function formCheck() {
		//id 중복관련 전송여부 (true : 전송불가, false : 전송)
		var form = window.document.join;
		if (!form.memberId.value) {
			alert("아이디를 넣으세요");
			form.memberId.focus();
			return false;
		}
		if(gFlag){
			alert("ID 중복체크를 해주세요.");
			form.memberId.focus();
			return false;
		}
		if (flag) {
			alert("사용할 수 없는 ID 입니다. ");
			form.memberId.focus();
			return false;
		}
		if (!form.password.value) {
			alert("패스워드를 넣으세요");
			form.password.focus();
			return false;
			
		}
		if (!form.password2.value) {
			alert("패스워드 재입력을 넣으세요");
			form.password2.focus();
			return false;
		}
		if (pFlag){
			alert("비밀번호가 일치하지 않습니다.");
			form.password2.focus();
			return false;
		}
		if (!form.name.value) {
			alert("이름을 넣으세요");
			form.name.focus();
			return false;
		}
		if (!form.birthday.value) {
			alert("생년월일을 넣으세요");
			form.birthday.focus();
			return false;
		}
		if (!form.seq.value) {
			alert("주소를 검색하세요");
			form.zipcode.focus();
			return false;
		}
		if (!form.email.value) {
			alert("이메일을 넣으세요");
			form.email.focus();
			return false;
		}
		if (!form.phoneNo.value) {
			alert("전화번호를 넣으세요");
			form.phoneNo.focus();
			return false;
		}
		
		document.join.submit();
	}
	
	var xhr;
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		} else {
			xhr = new XMLHttpRequest();
		}
	}

	
	function idCheck() {
		//innerHTML을 이용해 span에 html 입력
		var spanTg = document.getElementById("id_msg");
		var idTF = document.getElementById("memberId");

		if (idTF.value.length < 4) {
			spanTg.innerHTML = "<font size='2' color='gray'>ID는 4글자 이상넣으세요</font>";
		} else {
			spanTg.innerHTML = "";
			//1. xhr 생성
			createXMLHttpRequest();

			var url = "/hansot/idCheck.do?command=idCheck&id="
					+ document.getElementById("memberId").value;
			//처리를 요청
			xhr.onreadystatechange = checkId;
			xhr.open("GET", url, true);
			xhr.send(null);
		}
	}
	//callback 함수
	function checkId() {
		//응답이 끝났으면
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				var txt = xhr.responseText;
				flag = eval(txt);
				if (flag) {
					document.getElementById("id_msg").innerHTML = "<font size='2' color='red'>중복된 아이디입니다.</font>";
					gFlag = true;
				} else {
					document.getElementById("id_msg").innerHTML = "<font size='2' color='blue'>사용가능한 아이디입니다.</font>";
					gFlag = false;
				}
			} else {
				alert("처리 도중 오류 발생 : " + xhr.status);
			}
		}
	}
	function checkPassword() {
		var form = window.document.join;
		if (form.password.value != form.password2.value) {
			document.getElementById("pass_msg").innerHTML = "<font size='2' color='red'>비밀번호가 상이합니다.</font>";
			pFlag = true;
		} else {
			document.getElementById("pass_msg").innerHTML = "<font size='2' color='blue'>비밀번호가 적합합니다.</font>";
			pFlag = false;
		}
	}

	function searchAddress() {
		window.open("/hansot/jsp/address_pop.jsp", "", "width=600,height=300");
	}
	
</script>


	<h2>회원 가입</h2>
	<hr>
	<form name="join" action="join.do">
		<input type="hidden" name="seq" id="seq">
		<table>
			<tr>
				<td align="center">ID :</td>
				<td><input type="text" name="memberId" id="memberId" /><input
					type="button" value="중복체크" onclick="idCheck();"><span
					id="id_msg"></span></td>
			</tr>
			<tr>
				<td align="center">비밀번호 :</td>
				<td><input type="password" name="password" id="password"></td>
			</tr>
			<tr>
				<td align="center">비밀번호 재입력 :</td>
				<td><input type="password" name="password2"
					onkeyup="checkPassword();" id="password2"><span
					id='pass_msg'></span></td>
			</tr>
			<tr>
				<td align="center">이름 :</td>
				<td><input type="text" name="name" id="name" /></td>
			</tr>
			<tr>
				<td align="center">생년 월일 :</td>
				<td><input type="text" name="birthday" id="birthday"></td>
			</tr>
			<tr>
				<td align="center">주소 :</td>
				<td>
					<table>
						<tr>
							<td>우편번호 :</td>
							<td><input type="text" name="zipcode" style="width: 80px" disabled="disabled">
								<input type="button" value="주소검색" onclick="searchAddress();">
							</td>
						</tr>
						<tr>
							<td>주소 :</td>
							<td><input type="text" name="address1" id="address1"
								style="width: 300px" disabled="disabled">
							</td>
						</tr>
						<tr>
							<td>상세 주소 :</td>
							<td><input type="text" name="address" id="address"
								style="width: 300px"></td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td align="center">e-mail :</td>
				<td><input type="text" name="email" id="email"></td>
			</tr>
			<tr>
				<td align="center">phone :</td>
				<td><input type="text" name="phoneNo" id="phoneNo"></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="button" onclick="formCheck();" value="등록">
					<input type="reset" value="재입력"></td>
			</tr>
		</table>
	</form>

